<script setup lang="ts">

defineProps(['name', 'show', 'time'])

function extractColorByName(name: any) {
    const temp = [];
    temp.push("#");
    for (let index = 0; index < name.length; index++) {
        temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
    }
    return temp.slice(0, 5).join('').slice(0, 4);
}
</script>

<template>
    <div class="line-note">
        <el-avatar :size="50" :style="{'background-color':
        extractColorByName(name)}">
            {{name}}
        </el-avatar>
        <el-space direction="vertical" style="margin-left: 8px; align-items: start">
            <b>{{ name }}</b>
            <el-text tag="p" size="default">{{ time }}</el-text>
        </el-space>
        <el-divider v-if="show"></el-divider>
    </div>
</template>

<style scoped>
.el-divider {
    padding: 3px;
    margin: 10px 0;
}
</style>